<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
  <script type="module" src="../../polymer-legacy.js"></script>
</head>
<body>

<script type="module">
import { PolymerElement, html } from '../../polymer-element.js';
class XA extends PolymerElement {
  static get template() {
    return html`<x-b prop="[[prop]]"></x-b>`;
  }
  static get observers() { return ['propChanged(prop)']}
  propChanged() {
    console.log(this.localName, 'propChanged', this.shadowRoot);
  }
  constructor() {
    console.log('x-a', 'constructed');
    super();
    this.childList = [];
    this.addEventListener('child-is-here', e => {
      let target = e.composedPath()[0];
      if (target !== this) {
        this.childList.push(target);
      }
    });
    this.prop = 'prop';
  }
  connectedCallback() {
    console.group(this.localName, 'connected');
    console.warn(this.localName, 'connected (user)', this.shadowRoot);
    super.connectedCallback();
    console.groupEnd(this.localName, 'connected');
  }
  _flushProperties() {
    console.log(this.localName, 'flush');
    super._flushProperties();
  }
  ready() {
    console.group(this.localName, 'ready');
    super.ready();
    console.warn(this.localName, 'ready (user)', this.shadowRoot);
    console.log(this.localName, 'childList', this.childList);
    console.groupEnd(this.localName, 'ready');
  }
}
customElements.define('x-a', XA);

class XB extends PolymerElement {
  static get template() {
    return `<x-c prop="[[prop]]"></x-c>`;
  }
  static get observers() { return ['propChanged(prop)']}
  propChanged() {
    console.log(this.localName, 'propChanged', this.shadowRoot);
  }
  constructor() {
    console.log('x-b', 'constructed');
    super();
    this.childList = [];
    this.addEventListener('child-is-here', e => {
      let target = e.composedPath()[0];
      if (target !== this) {
        this.childList.push(target);
      }
    });
  }
  connectedCallback() {
    console.group(this.localName, 'connected');
    console.warn(this.localName, 'connected (user)', this.shadowRoot);
    super.connectedCallback();
    console.groupEnd(this.localName, 'connected');
  }
  _flushProperties() {
    console.log(this.localName, 'flush');
    super._flushProperties();
  }
  ready() {
    console.group(this.localName, 'ready');
    this.dispatchEvent(new CustomEvent('child-is-here', {bubbles: true, composed: true}));
    super.ready();
    console.warn(this.localName, 'ready (user)', this.shadowRoot);
    console.log(this.localName, 'childList', this.childList);
    console.groupEnd(this.localName, 'ready');
  }
}
customElements.define('x-b', XB);

class XC extends PolymerElement {
  static get template() {
    return html`<div></div>`;
  }
  static get observers() { return ['propChanged(prop)']}
  propChanged() {
    console.log(this.localName, 'propChanged', this.shadowRoot);
  }
  constructor() {
    console.log('x-c', 'constructed');
    super();
    this.childList = [];
  }
  connectedCallback() {
    console.group(this.localName, 'connected');
    console.warn(this.localName, 'connected (user)', this.shadowRoot);
    super.connectedCallback();
    console.groupEnd(this.localName, 'connected');
  }
  _flushProperties() {
    console.log(this.localName, 'flush');
    super._flushProperties();
  }
  ready() {
    console.group(this.localName, 'ready');
    this.dispatchEvent(new CustomEvent('child-is-here', {bubbles: true, composed: true}));
    super.ready();
    console.warn(this.localName, 'ready (user)', this.shadowRoot);
    console.groupEnd(this.localName, 'ready');
  }
}
customElements.define('x-c', XC);
</script>

<x-a></x-a>

</body>
</html>